<template>
  <div class="profile-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="我的" fixed />

    <!-- 用户信息区域 -->
    <div class="user-info">
      <van-cell>
        <div class="user-avatar">
          <van-image round src="https://picsum.photos/id/64/200/200" alt="用户头像" class="avatar-img" />
          <div class="user-name">
            <span>{{ name }}</span>
            <van-icon name="edit" size="16" color="#999" />
          </div>
        </div>
        <van-icon name="arrow" size="16" color="#999" />
      </van-cell>
    </div>

    <!-- 订单区域 -->
    <div class="order-section">
      <van-cell title="我的订单" is-link>
        <template #right-icon>
          <span class="see-all">查看全部</span>
          <van-icon name="arrow" size="16" color="#999" />
        </template>
      </van-cell>

      <div class="order-types">
        <div class="order-type-item" v-for="(item, index) in orderTypes" :key="index">
          <van-icon :name="item.icon" size="24" color="#7232dd" />
          <span class="order-type-text">{{ item.text }}</span>
        </div>
      </div>
    </div>

    <!-- 功能区域 -->
    <div class="features-section">
      <van-grid :column-num="4" :border="false">
        <van-grid-item v-for="(item, index) in features" :key="index" icon="shopping-cart" :text="item.text"
          icon-color="#7232dd" @click="handleFeatureClick(item)" />
      </van-grid>
    </div>

    <!-- 其他选项 -->
    <div class="other-options">
      <van-cell-group>
        <van-cell v-for="(option, index) in otherOptions" :key="index" :title="option.title" :icon="option.icon" is-link
          icon-color="#7232dd" />
      </van-cell-group>
    </div>

    <!-- 退出登录按钮 -->
    <van-button type="primary" to="/login" @click="handleLogout">退出登录</van-button>

    <!-- 底部导航栏 -->
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" @click="$router.push('/home')">首页</van-tabbar-item>
      <van-tabbar-item icon="search" @click="$router.push('/prolist')">分类</van-tabbar-item>
      <van-tabbar-item icon="friends-o"  @click="$router.push('/cart')">购物车</van-tabbar-item>
      <van-tabbar-item icon="setting-o" @click="$router.push('/my')">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { getUserInfoRequest } from '@/api/userApi';

export default {
  data() {
    return {
      active: 3,
      userid: '',
      userfo: {},
      name: '',
      // 订单类型数据
      orderTypes: [
        { icon: 'pending-payment', text: '待付款' },
        { icon: 'pending-delivery', text: '待发货' },
        { icon: 'pending-receive', text: '待收货' },
        { icon: 'pending-evaluate', text: '待评价' },
        { icon: 'after-sales', text: '售后' }
      ],

      // 功能选项数据
      features: [
        { icon: 'coupon', text: '优惠券' },
        { icon: 'points', text: '我的积分' },
        { icon: 'collect', text: '我的收藏' },
        { icon: 'footprint', text: '浏览历史' },
        { icon: 'address', text: '收货地址' },
        { icon: 'invoice', text: '我的发票' },
        { icon: 'balance-o', text: '账户余额' },
        { icon: 'gift-card', text: '礼品卡' }
      ],

      // 其他选项数据
      otherOptions: [
        { icon: 'settings', title: '设置' },
        { icon: 'question-circle', title: '帮助中心' },
        { icon: 'contact', title: '联系客服' },
        { icon: 'feedback', title: '意见反馈' }
      ],

      // 退出登录对话框显示状态
      showLogoutDialog: false
    };
  },
  mounted() {
    this.userid = localStorage.getItem('userid');
    console.log(this.userid);
    this.userfo = getUserInfoRequest(this.userid).then(response => {
      // response 就是截图里的对象，逐层取数据
      const username = response.data.data[0].username;
      console.log(username);
      this.name = username;
    })
  },
  methods: {
    // 处理功能项点击
    handleFeatureClick(item) {
      // 这里可以添加对应功能的跳转逻辑
      console.log('点击了:', item.text);
    },

    // 显示退出登录确认框
    showLogoutConfirm() {
      this.showLogoutDialog = true;
    },


    handleLogout(){
      localStorage.removeItem('userid');
      localStorage.removeItem('token');
      this.$router.push('/login');
    }
  }
};
</script>

<style scoped>
.profile-page {
  padding-top: 46px;
  /* 为固定导航栏预留空间 */
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 用户信息样式 */
.user-info {
  background-color: #fff;
  margin-bottom: 10px;
}

.user-avatar {
  display: flex;
  align-items: center;
}

.avatar-img {
  width: 60px;
  height: 60px;
  margin-right: 15px;
  border: 2px solid #f0f0f0;
}

.user-name {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
}

.user-name span {
  margin-right: 10px;
}

/* 订单区域样式 */
.order-section {
  background-color: #fff;
  margin-bottom: 10px;
  padding-bottom: 15px;
}

.order-types {
  display: flex;
  justify-content: space-around;
  padding-top: 10px;
}

.order-type-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.order-type-text {
  font-size: 14px;
  margin-top: 8px;
  color: #333;
}

.see-all {
  color: #999;
  font-size: 14px;
  margin-right: 5px;
}

/* 功能区域样式 */
.features-section {
  background-color: #fff;
  margin-bottom: 10px;
  padding: 10px 0;
}

/* 其他选项样式 */
.other-options {
  background-color: #fff;
  margin-bottom: 20px;
}

/* 退出登录按钮样式 */
.logout-btn {
  margin: 0 15px 30px;
  background-color: #7232dd;
  border-color: #7232dd;
}
</style>
